<template>
  <div class="right-main">
    <div class="tob-bar">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/company/list' }">服务公司</el-breadcrumb-item>
        <el-breadcrumb-item>查看</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="mainContainer viewCompanyPage">
      <!-- 查看服务公司表单 -->
      <div class="customform shebaoform">
        <el-form :inline="true" label-width="130px" label-position="left">
          <div class="el-form--inline">
            <el-form-item label="服务类类别">
              <div class="el-input form-control-static">{{company.company.serviceType==0 ? '社保/公积金': '商保' }}</div>
            </el-form-item>
            <el-form-item label="公司名称">
              <div class="el-input form-control-static">{{company.company.name}}</div>
            </el-form-item>
            <el-form-item label="联系人">
              <div class="el-input form-control-static">{{company.company.rincipal}}</div>
            </el-form-item>
          </div>
          <div class="el-form--inline">
            <el-form-item label="联系电话" prop="value4">
              <div class="el-input form-control-static">{{company.company.phone}}</div>
            </el-form-item>
            <el-form-item label="联系地址" prop="value5">
              <div class="el-input form-control-static">
                {{ (company.company.province==null?"":company.company.province)+' '+
                (company.company.city==null?"":company.company.city)+' '+
                (company.company.addr==null?"":company.company.addr) }}
              </div>
            </el-form-item>
          </div>
          <div class="el-form--inline">
            <el-form-item label="客户社保截止日">
              <div class="el-input form-control-static">{{ company.company.socialCustomerDealind ==0 ? '当月':'上月' }}{{ company.company.socialCustomerDealindDay+'日' }}</div>
            </el-form-item>
            <el-form-item label="客户公积金截止日">
              <div class="el-input form-control-static">{{ company.company.accfundCustomerDealind ==0 ? '当月':'上月' }}{{ company.company.accfundCustomerDealindDay+'日' }}</div>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <!-- 查看服务公司表单结束 -->
    </div>

    <div v-if="company.company.serviceType==0">
      <!-- 社保账户 -->
      <div class="mainContainer m-t20">
        <el-tabs class="custom-tab" v-model="titleName1">
          <el-tab-pane label="社保-账户" name="title">
            <!-- 社保账户表格 -->
            <div class="zy-form my-table">
              <template>
                <el-table :data="company.solicyAccounts" style="width: 100%">
                  <el-table-column prop="name" label="账户名称"></el-table-column>
                  <el-table-column prop="account" label="公积金号"></el-table-column>
                  <el-table-column prop="remarks" label="备注"></el-table-column>
                </el-table>
              </template>
            </div>
            <!-- 社保账户表格结束 -->
          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- 社保账户结束 -->

      <!-- 公积金账户 -->
      <div class="mainContainer m-t20">
        <el-tabs class="custom-tab" v-model="titleName2">
          <el-tab-pane label="公积金-账户" name="title">
            <!-- 公积金账户表格 -->
            <div class="zy-form my-table">
              <template>
                <el-table :data="company.accfundAccounts" style="width: 100%">
                  <el-table-column prop="name" label="账户名称"></el-table-column>
                  <el-table-column prop="account" label="公积金号"></el-table-column>
                  <el-table-column prop="remarks" label="备注"></el-table-column>
                </el-table>
              </template>
            </div>
            <!-- 公积金账户表格结束 -->
          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- 公积金账户结束 -->
    </div>

    <div class="page-form-btn">
      <el-button @click="back">取消</el-button>
      <el-button type="primary" @click="edit">编辑</el-button>
    </div>
  </div>
</template>

<script>
import Http from "../../libs/http.js";
export default {
  name: "viewCompany",
  data() {
    return {
      company:{
        company :{serviceType:0}
      },
      titleName1: "title",
      titleName2: "title",
      // 社保账户表格
      insureAccountList: [
        {
          tbValue1: "广州XXXXX公司",
          tbValue2: "2479182479821379",
          tbValue3: "guangzhou",
          tbValue4: "2寸彩色蓝底照片"
        }
      ],
      // 公积金账户表格
      fundAccountList: [
        {
          tbValue11: "广州XXXXX公积金公司",
          tbValue22: "34235435",
          tbValue33: "guangzhou",
          tbValue44: "2寸彩色蓝底照片"
        }
      ],
    };
  },
  created() {
    this.init();
  },
  methods: {
    init: function() {
      Http.api.get("/company/"+this.$route.query.id).then(res => {
        this.company = res.data;
      });
    },
    //编辑
    edit() {
      this.$router.push({
        path: "/company/edit", query: {
          id: this.$route.query.id
        }
      });
    },
    back() {
      this.$router.go(-1);
    }
  }
};
</script>
